<template>
    <div class="leaderboard-list">
        <div class="leaderboard-header">
            <h3>Leaderboard</h3>
            <div class="time-filter">
                <van-tabs v-model:active="activeTimeFilter" @change="handleTimeFilterChange">
                    <van-tab title="Today" name="today" />
                    <van-tab title="Week" name="week" />
                    <van-tab title="Month" name="month" />
                    <van-tab title="All Time" name="all" />
                </van-tabs>
            </div>
        </div>

        <div class="category-filter">
            <van-tabs v-model:active="activeCategory" @change="handleCategoryChange" sticky>
                <van-tab title="Overall" name="overall" />
                <van-tab title="Training" name="training" />
                <van-tab title="Community" name="community" />
                <van-tab title="Achievements" name="achievements" />
            </van-tabs>
        </div>

        <div class="leaderboard-content">
            <!-- 前三名特殊展示 -->
            <div class="top-three">
                <div v-for="(user, index) in topThree" :key="user.id" class="top-user" :class="`rank-${index + 1}`">
                    <div class="rank-badge">
                        <van-icon v-if="index === 0" name="medal" />
                        <van-icon v-else-if="index === 1" name="medal-o" />
                        <van-icon v-else name="medal-o" />
                        <span>{{ index + 1 }}</span>
                    </div>
                    <div class="user-avatar">
                        <van-image :src="user.avatar || '/default-avatar.png'" width="60" height="60" round
                            fit="cover" />
                        <div v-if="user.is_online" class="online-indicator"></div>
                    </div>
                    <div class="user-info">
                        <div class="username">{{ user.username }}</div>
                        <div class="score">{{ formatScore(user.score) }}</div>
                        <div class="level">Lv.{{ user.level }}</div>
                    </div>
                </div>
            </div>

            <!-- 其他排名 -->
            <div class="other-ranks">
                <van-loading v-if="loading" size="24px" vertical>Loading rankings...</van-loading>
                <div v-else-if="otherUsers.length > 0" class="rank-list">
                    <div v-for="(user, index) in otherUsers" :key="user.id" class="rank-item"
                        :class="{ 'current-user': user.is_current_user }" @click="viewUserProfile(user)">
                        <div class="rank-number">{{ index + 4 }}</div>
                        <div class="user-avatar">
                            <van-image :src="user.avatar || '/default-avatar.png'" width="40" height="40" round
                                fit="cover" />
                            <div v-if="user.is_online" class="online-indicator"></div>
                        </div>
                        <div class="user-details">
                            <div class="user-name">
                                <span class="username">{{ user.username }}</span>
                                <div class="user-badges">
                                    <van-tag v-if="user.is_vip" type="warning">VIP</van-tag>
                                    <van-tag v-if="user.is_verified" type="success">
                                        <van-icon name="success" />
                                    </van-tag>
                                </div>
                            </div>
                            <div class="user-stats">
                                <span class="level">Lv.{{ user.level }}</span>
                                <span class="separator">•</span>
                                <span class="score">{{ formatScore(user.score) }} pts</span>
                            </div>
                        </div>
                        <div class="rank-change">
                            <div v-if="(user.rank_change || 0) > 0" class="rank-up">
                                <van-icon name="arrow-up" />
                                <span>{{ user.rank_change }}</span>
                            </div>
                            <div v-else-if="(user.rank_change || 0) < 0" class="rank-down">
                                <van-icon name="arrow-down" />
                                <span>{{ Math.abs(user.rank_change || 0) }}</span>
                            </div>
                            <div v-else class="rank-same">
                                <van-icon name="minus" />
                            </div>
                        </div>
                    </div>
                </div>
                <van-empty v-else description="No rankings available" image="search">
                    <span>Be the first to join the leaderboard!</span>
                </van-empty>
            </div>

            <!-- 当前用户排名 -->
            <div v-if="currentUserRank" class="current-user-rank">
                <div class="rank-card">
                    <div class="rank-info">
                        <span class="rank-text">Your Rank</span>
                        <span class="rank-number">#{{ currentUserRank.rank }}</span>
                    </div>
                    <div class="user-info">
                        <van-image :src="currentUserRank.avatar || '/default-avatar.png'" width="32" height="32" round
                            fit="cover" />
                        <div class="user-details">
                            <span class="username">{{ currentUserRank.username }}</span>
                            <span class="score">{{ formatScore(currentUserRank.score) }} pts</span>
                        </div>
                    </div>
                    <van-button size="mini" type="primary" @click="viewMyProfile">
                        View Profile
                    </van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { showToast } from 'vant'
import type { LeaderboardUser } from '@/types/user'

interface Props {
    leaderboard: LeaderboardUser[]
}

const props = defineProps<Props>()

// 响应式数据
const loading = ref(false)
const activeTimeFilter = ref('week')
const activeCategory = ref('overall')

// 模拟当前用户排名数据
const currentUserRank = ref({
    rank: 15,
    username: 'You',
    avatar: '/default-avatar.png',
    score: 2450
})

// 计算属性
const topThree = computed(() => {
    return props.leaderboard.slice(0, 3)
})

const otherUsers = computed(() => {
    return props.leaderboard.slice(3)
})

// 方法
const formatScore = (score: number) => {
    if (score >= 1000000) {
        return `${(score / 1000000).toFixed(1)}M`
    } else if (score >= 1000) {
        return `${(score / 1000).toFixed(1)}K`
    }
    return score.toString()
}

const handleTimeFilterChange = (name: string) => {
    loading.value = true
    // 模拟API调用
    setTimeout(() => {
        loading.value = false
        showToast(`Showing ${name} rankings`)
    }, 500)
}

const handleCategoryChange = (name: string) => {
    loading.value = true
    // 模拟API调用
    setTimeout(() => {
        loading.value = false
        showToast(`Showing ${name} leaderboard`)
    }, 500)
}

const viewUserProfile = (user: LeaderboardUser) => {
    showToast(`Viewing ${user.username}'s profile`)
}

const viewMyProfile = () => {
    showToast('Viewing your profile')
}

// 生命周期
onMounted(() => {
    // 初始化数据加载
})
</script>

<style lang="scss" scoped>
.leaderboard-list {
    .leaderboard-header {
        margin-bottom: 16px;

        h3 {
            font-size: 20px;
            font-weight: 600;
            color: #323233;
            margin: 0 0 16px 0;
        }

        .time-filter {
            :deep(.van-tabs) {
                .van-tab {
                    font-size: 14px;
                }
            }
        }
    }

    .category-filter {
        margin-bottom: 20px;
        background: white;
        border-radius: 12px;
        overflow: hidden;

        :deep(.van-tabs) {
            .van-tabs__nav {
                background: #f7f8fa;
            }

            .van-tab {
                font-size: 13px;
                padding: 8px 12px;
            }
        }
    }

    .leaderboard-content {
        .top-three {
            display: flex;
            justify-content: space-around;
            margin-bottom: 24px;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 16px;
            color: white;

            .top-user {
                text-align: center;
                position: relative;

                &.rank-1 {
                    .rank-badge {
                        background: linear-gradient(135deg, #ffd700, #ffed4e);
                        color: #323233;

                        .van-icon {
                            color: #ffd700;
                        }
                    }
                }

                &.rank-2 {
                    .rank-badge {
                        background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
                        color: #323233;

                        .van-icon {
                            color: #c0c0c0;
                        }
                    }
                }

                &.rank-3 {
                    .rank-badge {
                        background: linear-gradient(135deg, #cd7f32, #daa520);
                        color: white;

                        .van-icon {
                            color: #cd7f32;
                        }
                    }
                }

                .rank-badge {
                    position: absolute;
                    top: -8px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-weight: 600;
                    z-index: 2;

                    .van-icon {
                        position: absolute;
                        font-size: 16px;
                    }

                    span {
                        position: relative;
                        z-index: 1;
                    }
                }

                .user-avatar {
                    position: relative;
                    margin: 16px 0 12px;

                    .online-indicator {
                        position: absolute;
                        bottom: 2px;
                        right: 2px;
                        width: 12px;
                        height: 12px;
                        background: #07c160;
                        border: 2px solid white;
                        border-radius: 50%;
                    }
                }

                .user-info {
                    .username {
                        font-size: 14px;
                        font-weight: 600;
                        margin-bottom: 4px;
                    }

                    .score {
                        font-size: 16px;
                        font-weight: 700;
                        margin-bottom: 2px;
                    }

                    .level {
                        font-size: 12px;
                        opacity: 0.8;
                    }
                }
            }
        }

        .other-ranks {
            .rank-list {
                .rank-item {
                    display: flex;
                    align-items: center;
                    padding: 12px 16px;
                    background: white;
                    border-radius: 12px;
                    margin-bottom: 8px;
                    cursor: pointer;
                    transition: all 0.3s ease;

                    &:hover {
                        transform: translateY(-1px);
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                    }

                    &.current-user {
                        background: linear-gradient(135deg, #1989fa, #1976d2);
                        color: white;

                        .user-stats {
                            color: rgba(255, 255, 255, 0.8);
                        }

                        .rank-change {
                            .van-icon {
                                color: white;
                            }
                        }
                    }

                    .rank-number {
                        width: 32px;
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                        color: #646566;
                    }

                    .user-avatar {
                        position: relative;
                        margin: 0 12px;

                        .online-indicator {
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 10px;
                            height: 10px;
                            background: #07c160;
                            border: 2px solid white;
                            border-radius: 50%;
                        }
                    }

                    .user-details {
                        flex: 1;

                        .user-name {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            margin-bottom: 4px;

                            .username {
                                font-size: 15px;
                                font-weight: 500;
                                color: #323233;
                            }

                            .user-badges {
                                display: flex;
                                gap: 4px;
                            }
                        }

                        .user-stats {
                            display: flex;
                            align-items: center;
                            gap: 6px;
                            font-size: 12px;
                            color: #969799;

                            .separator {
                                opacity: 0.5;
                            }
                        }
                    }

                    .rank-change {
                        .rank-up {
                            display: flex;
                            align-items: center;
                            gap: 2px;
                            color: #07c160;
                            font-size: 12px;
                            font-weight: 500;
                        }

                        .rank-down {
                            display: flex;
                            align-items: center;
                            gap: 2px;
                            color: #ee0a24;
                            font-size: 12px;
                            font-weight: 500;
                        }

                        .rank-same {
                            color: #969799;
                            font-size: 12px;
                        }

                        .van-icon {
                            font-size: 14px;
                        }
                    }
                }
            }
        }

        .current-user-rank {
            position: sticky;
            bottom: 0;
            margin-top: 20px;
            padding: 16px 0;
            background: #f7f8fa;

            .rank-card {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 16px;
                background: white;
                border-radius: 12px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

                .rank-info {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .rank-text {
                        font-size: 12px;
                        color: #969799;
                    }

                    .rank-number {
                        font-size: 18px;
                        font-weight: 700;
                        color: #1989fa;
                    }
                }

                .user-info {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    flex: 1;
                    margin: 0 16px;

                    .user-details {
                        display: flex;
                        flex-direction: column;

                        .username {
                            font-size: 14px;
                            font-weight: 500;
                            color: #323233;
                        }

                        .score {
                            font-size: 12px;
                            color: #646566;
                        }
                    }
                }
            }
        }
    }
}
</style>